<style scoped>
  .count{
    height:100%;
    /* overflow: scroll; */
    /*margin-bottom: 70px;*/
  }
  p{
    font-weight: 400;
  }
  .my-count{
    background: linear-gradient(to right, #6379F8 0%,#91A5F8 100%);
  }
  .head{
    height:50px;
    position: fixed;
    width:100%;
    display: flex;
    justify-content: center;
    align-items:center;
    padding-top: 10px;
    background: linear-gradient(to right, #6379F8 0%,#91A5F8 100%);
  }
  .head-left{
    position: absolute;
    top: 25px;
    left:10px;
    height:40px;
  }
  .head-left>h1{
    color: #ffffff;
  }
  .head-right>h1{
    color: #ffffff;
  }
  .head-middle>h3{
    color: #ffffff;
  }
  .head-right{
    position: absolute;
    right:10px;
    top:22px;
    height:40px;
  }
  .content{
    overflow:scroll;
    margin-bottom: 60px;

  }
  .count-middle{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
  }
  .count-middle img{
    display: block;
    width:100px;
    height:100px;
  }
  .count-middle>p{
    color: #ffffff;
    margin-top: 20px;
    height:50px;
    width:100%;
    text-align: center;
  }
  /*.count-btn{*/
    /*margin-top: 10px;*/
    /*margin-bottom: 20px;*/
  /*}*/
  .count-btn button{
    border: 1px solid #ffffff;
    background: transparent;
    color: #ffffff;
    padding: 4px 16px 2px 16px;
    border-radius: 14px;
  }
  .count-btn button p{
    color: #ffffff;
  }
  .count-btn button:last-child{
    margin-left: 4px;
  }
  .list{
    /*margin-left: 10px;*/
    overflow: scroll;
  }
  .list ul li{
    padding: 10px 0 10px 10px;
    display: flex;
    border-bottom: 1px solid #E9E9E9;
    color: #555555;
    /*justify-content: center;*/
    /*align-items: center;*/
    justify-content: space-between;
  }
  .list ul li:nth-child(3){
    padding-left: 12px;
  }
  .list ul li:nth-child(4){
    padding-left: 12px;
  }
  .list ul li:nth-child(5){
    padding-left: 13px;
  }
  .list ul li:nth-child(6){
    padding-left: 13px;
  }
  .list ul li a{
    width:100%;
    height:100%;
    display: flex;
    flex-direction: row;
    /*justify-content: center;*/
    /*align-items: center;*/
    justify-content: space-between;
  }
  .list ul li .left{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .list ul li .right{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .list ul li .right h2{
    opacity: 0.5;
  }
  .list ul li i{
    flex: 1;
  }
  .list ul li i.last{
    margin-right: 10px;
  }
  .list ul li p{
    margin-left: 10px;
    flex: 8;
  }
  .exit{
    width:100%;
  }
  .exit h3{
    display: flex;
    background: -webkit-linear-gradient(left bottom, #6379F8, #91A5F8);
    /*width: 100%;*/
    /*margin:40px 20px;*/
    margin: 0 20px;
    margin-top: 20px;
    padding: 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: 20px;
  }
</style>

<template>
  <div class="count">
    <div class="head">
      <div class="head-left">
      </div>
      <div class="head-middle"><h3>我的账户</h3></div>
      <div class="head-right">
        <h1 class="iconfont icon-liuyan" @click="toMessage"></h1>
      </div>
    </div>
    <div class="content">
      <div class="my-count">

        <div class="count-middle">
          <img src="../../assets/img/touxiang.png" alt="">
          <p>{{newName}}</p>
          <div class="count-btn">
          </div>
        </div>
      </div>
      <div class="list" ref="listheight">
        <ul>
          <li @click="$router.push('/riskratings')">
            <div class="left">
              <h2 class="first iconfont icon-fangyu" style="color: #5e77f9;"></h2>
              <p>风险等级</p>
            </div>
            <div class="right">
              <p>{{rate}}</p>
              <h2 class="iconfont icon-xiangyou1"></h2>
            </div>
          </li>
          <li @click="toLink">
            <div class="left">
              <h2 class="first iconfont icon-suo1" style="color: #6e84f7;"></h2>
              <p>账号与安全</p>
            </div>
            <div class="right">
              <h2 class="iconfont icon-xiangyou1"></h2>
            </div>
          </li>
          <li @click="help">
            <div class="left">
              <h3 class="first iconfont icon-bangzhu" style="color: #7b90f8;"></h3>
              <p>帮助中心</p>
            </div>
            <div class="right">
              <h2 class="iconfont icon-xiangyou1"></h2>
            </div>
          </li>
          <li>
            <router-link to="/suggestion">
              <div class="left">
                <h3 class="first iconfont icon-fankui" style="color: #7f94f7;"></h3>
                <p>意见反馈</p>
              </div>
              <div class="right">
                <h2 class="iconfont icon-xiangyou1"></h2>
              </div>
            </router-link>
          </li>
          <li>
            <a href="tel:400-900-6687">
              <div class="left">
                <h3 class="first iconfont icon-kefu" style="color: #90a4f7;"></h3>
                <p>联系客服</p>
              </div>
              <div class="right">
                <h2 class="iconfont icon-xiangyou1"></h2>
              </div>
            </a>
          </li>
          <li>
            <div class="left">
              <h3 class="first iconfont icon-banbenhao" style="color: #A0b1f7;"></h3>
              <p>版本号</p>
            </div>
            <div class="right">
              <p style="margin-right: 10px;">{{$config.version}}</p>
              <!--<h2 class="iconfont icon-xiangyou1"></h2>-->
            </div>
          </li>
          <li>
            <div class="left">
              <router-link to="/bankOpen">银行开户</router-link>
            </div>
          </li>
        </ul>
        <div class="exit" @click="exit"><h3>{{isLogin}}</h3></div>
      </div>
    </div>


  </div>

</template>

<script>
  import host from '../../config.js'
  import axios from 'axios'
  import { Toast } from 'mint-ui'
  import { MessageBox } from 'mint-ui'

  export default {
    components: {
    },
    data() {
      return {
        token: null,
        newName: null,
        token:null,
        message: null,
        isLogin: null,
        rishlever: {
          "conservative": "保守",
          "midConservative": "中等保守",
          "balance": "平衡",
          "midAggressive": "中等进取",
          "aggressive": "进取"
        },
        rate: null
      }
    },
    created () {

    },
    mounted () {
      // let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      // let h1 = h - 300
      // this.$refs.listheight.style.height = h1 + 'px'
      if(window.localStorage.getItem('token')){
        this.isLogin = "安全退出"
        let that = this
        axios({
          method: 'get',
          url: host.host + "/api/usr/updateInfo",
          headers: {'Authorization': window.localStorage.getItem('token')}
        }).then(function (data) {
          if(data.data.code === 6006 || data.data.code === 6007){
            this.isLogin = "登录"
          }
          if(data.data.code === 200) {
            localStorage.setItem("message",JSON.stringify(data.data.data))
            that.newName = data.data.data.phone
            that.message = data.data.data
            for(var i in that.rishlever){
              if(data.data.data.risk_level === i) {
                that.rate = that.rishlever[i]
              }
            }
          }
        })
      } else {
        this.isLogin = "登录"
      }
    },
    methods: {
      exit(){
        let store = this.$store
        let device = window.localStorage.getItem('device')
        if(this.isLogin === "登录"){
          this.$router.push('/login')
          return
        }
        window.localStorage.removeItem("token")
        window.localStorage.setItem('device',device)
        let that = this
        // axios({
        //   method: 'get',
        //   headers: {'Authorization': this.token},
        //   url: host.host + "/api/usr/revokeToken"
        // }).then(function (data) {
        //   store.state.user = {}
        //   if(data.data.code === 6006 || data.data.code === 6007){
        //     Toast({
        //       message: '您已退出',
        //       duration: 1000
        //     })
        //     that.isLogin = "登录"
        //   } else if(data.data.code === 200){
        //     that.newName = null
        //     Toast({
        //       message: '退出成功',
        //       duration: 1000
        //     })
        //     that.isLogin = "登录"
        //     window.localStorage.clear()
        //   }
        // })
         axios({
           method: 'get',
           url: host.host + "/api/usr/updateInfo",
           headers: {'Authorization': window.localStorage.getItem('token')}
         }).then(function (data) {
          store.state.user = {}
          if(data.data.code === 6006 || data.data.code === 6007){
            Toast({
              message: '您已退出',
              duration: 1000
            })
            that.isLogin = "登录"
          } else if(data.data.code === 200){
            that.newName = null
            Toast({
              message: '退出成功',
              duration: 1000
            })
            that.isLogin = "登录"
            window.localStorage.clear()
          }
        })
      },
      toLink () {
        if (window.localStorage.getItem('token')) {
          this.$router.push('/safe')
        } else {
          this.$router.push('/login')
        }
      },
//      contact () {
//        window.location.href = 'tel:400-900-6687'
//      },
      help () {
        this.$router.push('/help')
        // TODO: cordova webview
        // cordova.ThemeableBrowser.open('http://192.168.3.140:8080/#/helpdoc', '_blank', this.$config.AppInBrowserOptions)
      },
      toMessage () {
        this.$router.push('/messageCenter')
      }
    }
  }
</script>
